import { useEffect, useMemo, forwardRef, useRef, useState, ReactElement } from 'react';
import cn from 'classnames';
import CustomInbizGraph from '../InbizGraph';
import { CloseOutlined } from '@ant-design/icons';
import { getMessage } from '@inbiz/react';
import AdvancedSearch from '../AdvancedSearch'; // 高级搜索内容【表单+搜索标签】
import HotKeywords from './HotKeywords'; // 热门搜索组件
import SearchInputView from './SearchInputView';
import SearchModeView from './SearchModeView';
import FullScreenModal from '../SmallPanelView/FullScreenModal';
import SearchTextList from './SearchTextList'
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import { usePrefixClassName } from '../../../../store/hooks/usePrefixClassName';
import { useViewType } from '../../../../store/hooks/useViewType';
import { useHotKeywordsPosition } from '../../../../store/hooks/useHotKeywordsPosition';
import { useSearchPropsState } from '../../../../store/hooks/useSearchPropsState';


const SearchPanelView = forwardRef((props: any, ref: any): ReactElement => {
  const prefixCls = usePrefixClassName();
  const nodeId = props.controlId;
  const updateUIState = useSearchUIDispatch();
  const { hotKeywordsSwitch } = useSearchPropsState();
  const { selectShowTab, switchAdSearch, showGraph, keyword, fullScreen, showFullModal } = useSearchUIState();
  const { onDrawerClose, smallPanelViewInputClassName, inputwidth, $showOriginSearch, showOriginSearch,visible, $visible, inbiz } = props;

  const hotKeywordsPosition = useHotKeywordsPosition();
  const viewType = useViewType();
  const marginLeft = useMemo(() => {
    if (selectShowTab?.isDMS && selectShowTab.searchType?.length) {
      return 'marginLeft';
    } else {
      return '';
    }
  }, [selectShowTab]);
  const $searchRef = useRef<HTMLDivElement>(null);

  const onOpenAdSearch = () => {
    if (inbiz?.browser?.designer) return;
    updateUIState({
      switchAdSearch: true,
    });
  };
  return (
    <div
      className={cn(prefixCls)}
      ref={$searchRef}
      style={{ justifyContent: props.align || 'center', paddingTop: viewType !== 'smallPanelView' ? 52 : 0 }}
    >
      {/* 抽屉关闭按钮 */}
      {!switchAdSearch && viewType === 'largePanelView' && (
        <CloseOutlined className="close-drawer-icon" onClick={onDrawerClose} />
      )}
      {/* 搜索主体 */}
      <div className="search-body-container" style={{ zIndex: viewType == 'smallPanelView' ? 2 : 1 }}>
        {/* 热门搜索-头部 */}
        {Boolean(hotKeywordsSwitch) && viewType !== 'smallPanelView' && hotKeywordsPosition === 'top' && (
          <div className="search-hot-keyword-top">
            <div className={marginLeft}>
              <HotKeywords />
            </div>
          </div>
        )}
        <div className="search-body-input-box" id={`${nodeId}_searchBody`}>
          {/* 搜索框 */}
          <SearchInputView {...props} $showOriginSearch={$showOriginSearch} visible={visible} $visible={$visible} inputwidth={inputwidth} smallPanelViewInputClassName={smallPanelViewInputClassName} />
          {/* 搜索方式 */}
          {!switchAdSearch && viewType !== 'smallPanelView' && <SearchModeView />}
        </div>
        {
          // 是否显示内嵌-关键字图谱
          !showGraph ? (
            <>
              {/* 搜索关键字(检索条件) */}
              {viewType !== 'smallPanelView' && <SearchTextList onOpenAdSearch={onOpenAdSearch} {...props}/>}
              {/* 高级搜索 */}
              {Boolean(selectShowTab?.advancedSearch) && viewType !== 'smallPanelView' && <AdvancedSearch onOpenAdSearch={onOpenAdSearch} />}

              {/* 热门搜索-底部 */}
              {Boolean(hotKeywordsSwitch) && viewType !== 'smallPanelView' && hotKeywordsPosition === 'bottom' && <HotKeywords />}

            </>
          ) : (
            // {/* 关键字图谱 */}
            viewType !== 'smallPanelView' && <CustomInbizGraph svgBoxId='inlinescreenSvg' closeIcon controlId={nodeId} />
          )
        }
      </div>
      <FullScreenModal
        isFullScreen={fullScreen}
        $isFullScreen={(bool) => updateUIState({ fullScreen: bool })}
        visible={showFullModal}
        $visible={() => updateUIState({ showFullModal: false })}
        title={getMessage('SearchEngine.inform')}
      >
        <CustomInbizGraph controlId={nodeId} svgBoxId='fullscreenSvg' customHeight={fullScreen ? 800 : 720} customWidth={fullScreen ? 1500 : 1450} fullModalVisible={showFullModal} />
      </FullScreenModal>
    </div>
  );
});

export default SearchPanelView;
